<template>
  <div class="Template">
   <!-- 头部搜索 -->
      <header>
      <span>
        <span>模板名称</span>
        <el-input v-model="name" placeholder="请输入关键字" style="width:200px"></el-input>
      </span>
      <span>
        <span>模板类型</span>
        <el-select v-model="type" placeholder="全部">
          <el-option
            v-for="item in tempOptions"
            :key="item.key"
            :label="item.type"
            :value="item.type">
          </el-option>
        </el-select>
      </span>
       <p>
        <el-link type="primary"   @click="dialogTableVisible = true;tempName='';tempType=''"  style="padding-right:20px;margin-left:8px" >上传模板</el-link>
        <el-button type="primary" style="float: right;" icon="el-icon-search" @click="searchAll" >搜索</el-button>
      </p>
    </header>
      <!-- 上传模板 -->
    <div>
      <el-dialog title="上传模板" :visible.sync="dialogTableVisible" id="dialog">
        <div class="">
            <div class="iptDives">
              <span class="edituser_span">模板名称</span><el-input placeholder="请输入要上传的模板名称" v-model="tempName"/>
            </div>
            <div class="iptDives">
              <span style="width:123px">模板类型</span>
              <el-select v-model="tempType" placeholder="请输入要上传的模板类型" style="width:300px" >
                <el-option
                  v-for="item in tempOptions"
                  :key="item.key"
                  :label="item.type"
                  :value="item.type">
                </el-option>
              </el-select>
            </div>
            <input type="file" @change="getfiles($event)"/>
            <div class="btnDiv">
                 <el-button  type="primary" @click="dialogTableVisible = false">取消</el-button>
                 <el-button  type="primary" @click="upload">添加</el-button>
            </div>
        </div>
    </el-dialog>
    </div>
    <div>
      <!-- 表格 -->
      <el-table :data="tempList.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%"
      :header-cell-style="{background:'#EBEEF5'}"
      >
      <el-table-column prop="name" label="模板名称">
        <template slot-scope="scope">{{scope.row.title}}</template>
      </el-table-column>
      <el-table-column prop="name" label="模板类型">
        <template slot-scope="scope">{{scope.row.type}}</template>
      </el-table-column>
       <el-table-column prop="name" label="模板路径">
        <template slot-scope="scope">{{scope.row.downurl}}</template>
      </el-table-column>
      <el-table-column prop="date" label="创建时间" >
        <template slot-scope="scope">{{$getDate(Number(scope.row.createtime))}}</template>
      </el-table-column>
      <el-table-column prop="date" label="操作" >
         <template slot-scope="scope">
            <el-button type="text" @click="Black(scope.row.title,scope.row.downurl,'下载')">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination_m">
       <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,6,8]" 
          :page-size="pageSize"        
          layout="total, sizes, prev, pager, next, jumper"
          :total="tempList.length"
          :highlight-current-row="true"
          >   
      </el-pagination>
    </div>
    </div>
    
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        txtUrl:[],
        tempName:'',
        tempType:'',
        tempList:[],
        name:'',
        type:'',
        pageSize:6,
        currentPage:1,
        dialogTableVisible:false,
        tempOptions:[
          {
            key: 'test',
            type: '出题模板'
          },
          {
            key: 'grade',
            type: '考试模板'
          }
        ]
      };
    },
    mounted(){this.setList()},
    methods:{
    //下载
    download(files){window.location.href = `http://192.168.1.198:8080${files}`},
    //上传
    upload(){
      const {tempName,txtUrl,$message ,$httpAxios,$api,tempType} = this
      if(tempName === '') return $message.error('文件名称不能为空')
      if(!txtUrl) return  $message.error('请上传文件后再进行提交')

      $httpAxios($api.temp_Add({title:tempName,downurl:txtUrl.name,type:tempType,userid:sessionStorage.userid,str:tempType+''+tempName}),res=>{
            this.setList()
            $message.success('上传成功')
            this.currentPage = 1;
      })
      this.tempType = '';
      this.tempName = ''
      this.dialogTableVisible = false
    },
   
    getfiles(event){
      this.txtUrl = event.target.files[0];
      let files = event.target.files[0];

      let data = new FormData()
          data.append(sessionStorage.user+'',files)
    
      this.$httpAxios(this.$api.temp_Upload(data,{"Content-Type":"multipart/form-data"}),res=>{
            this.setList()
            this.$message.success(res.msg)
            this.currentPage = 1;
      })
    },
   
    setList(){
      this.$httpAxios(this.$api.temp_List(),res=>{
            this.tempList=res.data
            this.currentPage = 1;
      })
    },
    searchAll(){
       this.$httpAxios(this.$api.temp_Search({title:this.name,type:this.type}),res=>{
            this.tempList = res.data
            this.$message.success(res.msg);
            this.currentPage = 1;
      })
    },
   
  // 分页器
  handleCurrentChange(currentPage) {this.currentPage = currentPage;},
  // 每张显示的个数
  handleSizeChange(size){this.pageSize = size;},

  Black(title,downloadfiles,msg){
    this.$confirm('您确定要'+msg+'   '+title+'  吗', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.download(downloadfiles)}).catch(() => {this.$message({type: 'info',message: '已取消'});});
  }
  },
    
  };
</script>

<style scoped >

#dialog{
  width:75%;
  margin:auto
}
.edituser_span{
  width: 123px;
}
.iptDives{
  display: flex;
  margin: 10px auto;
}
.btnDiv{
    width:100%;
    text-align: right;
}
.el-input--small{
  width: 300px;
}
</style>